<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增表单设计')" />
    <th:block th:include="include :: jquery-smartwizard-css" />
    <th:block th:include="include :: select2-css" />
    <style type="text/css">
        /* 如果要让工具栏固定在页面底部,使用下面的样式,不需要的可以注释 */
        .sw>.toolbar-bottom{
            z-index: 100;
            bottom: 0px;
            left: 0;
            width: 100%;
            position: fixed;
            text-align: right;
            background: #fff;
            box-shadow: 0 -2px 6px 1px hsla(223,8%,83%,.5);
            border-top: 1px solid #e3e4e8;
        }
        /* 如果设置了是否自动调节高度为false,需要加滚动条 */
        .sw>.tab-content{
            overflow-x: hidden;
            overflow-y: auto;
        }

        #smartwizard{
            background-color: white;
            border-radius: 0 0 10px 10px;
            box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" style="height: 100%;">
    <div class="row">
        <div class="col-sm-12">


                    <div id="smartwizard">
                        <h2 style="padding-left: 10px; font-weight: 600;">
                            流程模型设计向导
                        </h2>
                        <ul class="nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#step-1"> 第一步：选择流程发起表单 </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#step-2"> 第二步：填写流程模型信息 </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#step-3"> 第三步：设计流程 </a>
                            </li>
                        </ul>
                        <div class="tab-content" style="height: 1000px; !important;">
                            <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
                                <div>
                                    <form class="form form-horizontal m-t">
                                        <div class="ibox">
                                            <div class="ibox-title">
                                                <h5>选择表单</h5>
                                            </div>
                                            <div class="ibox-content">
                                                <div class="form-group">
                                                    <label class="col-sm-1 control-label" style="width: 104px;text-align: right;padding-right: 0px;">表单：</label>

                                                    <div class="col-sm-5" style="padding-left: 0px;">
                                                        <select id="form_select" name="formId" class="form-control" onchange="showForm()">

                                                        </select>
                                                    </div>
                                                    <div class="col-sm-5" style="color: #0064b6; padding: 7px 0; cursor: pointer;" onclick="openDesignTab()">没有想要的表单？点击去设计</div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    <div class="ibox">
                                        <div class="ibox-title">
                                            <h5>表单预览</h5>
                                        </div>
                                        <div class="ibox-content">
                                            <div id="form_show" style="min-height: 300px;"></div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
                                <div>
                                    <form class="form form-horizontal m-t" th:id="form-form-add">
                                        <input name="deptId" type="hidden" id="treeId"/>
                                        <div class="ibox">
                                            <div class="ibox-title">
                                                <h5>流程模型信息</h5>
                                            </div>
                                            <div class="ibox-content">
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label" >流程key：</label>

                                                    <div class="col-sm-8" >
                                                        <input id="processKey" type="text" name="processKey" placeholder="流程key" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label" >流程名称：</label>

                                                    <div class="col-sm-8" >
                                                        <input id="name" type="text" name="name" placeholder="流程名称" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label" >所属部门：</label>

                                                    <div class="col-sm-8" >
                                                        <input name="deptName" onclick="selectDeptTree()" id="treeName" type="text" placeholder="请选择归属部门" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label" >描述：</label>

                                                    <div class="col-sm-8" >
                                                        <textarea name="remark" class="form-control real"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
                                <div>
                                    <iframe id="bpmnIframe" src="/bpmnjs/dist/index.html?type=addBpmn" style="width: 100%; height: 900px; border: 0;"></iframe>
                                </div>
                            </div>
                        </div>
                    </div>


        </div>

    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: jquery-smartwizard-js" />
<th:block th:include="include :: select2-js" />
<script th:inline="javascript">
    var prefix = ctx + "act/definition/model";
    var parentTabe = [[${windowName}]];
    $("#form-form-add").validate({
        focusCleanup: true,
        onkeyup: false,
        rules: {
            processKey: {
                required: true,
                remote: {
                    url: prefix + "/processKeyIsExist",     //后台处理程序
                    type: "post",               //数据发送方式
                    data: {                     //要传递的数据
                        processKey: function() {
                            return $("#processKey").val();
                        }
                    },
                    dataFilter: function (res, type) {
                        var arr = eval("("+res+")");
                        if(arr.code == 0){
                            return true;
                        } else {
                            return false;
                        }
                    }
                }
            },
            name: {
                required: true,
                remote: {
                    url: prefix + "/nameIsExist",     //后台处理程序
                    type: "post",               //数据发送方式
                    data: {                     //要传递的数据
                        name: function () {
                            return $("#name").val();
                        }
                    },
                    dataFilter: function (res, type) {
                        var arr = eval("(" + res + ")");
                        if (arr.code == 0) {
                            return true;
                        } else {
                            return false;
                        }
                    }
                }
            },
            treeName: {
                required: true
            }
        },
        messages: {
            processKey: {
                required: "请输入流程key",
                remote: "流程key已存在，请修改"
            },
            name: {
                required: "请输入流程名称",
                remote: "流程名称已存在，请修改"
            },
            treeName: {
                required: "请选择所属部门"
            }
        }
    });

    function submitHandler() {
        if ($.validate.form("form-form-add")) {
            $.operate.save(prefix + "/add", $('#form-form-add').serialize());
        }
    }




    $(document).ready(function() {
        // 工具栏按钮
        var btnFinish = $('<a id="btn-finish"></a>').text('保存')
            .addClass('btn btn-info')
            .on('click', function(){ submit(); });
        var btnCancel = $('<a id="btn-cancel"></a>').text('取消')
            .addClass('btn btn-danger')
            .on('click', function(){ $('#smartwizard').smartWizard("reset"); });
        // 下面两个按钮是为了因为插件默认的是botton,这里换成<a>,也可以选择用样式替换,或者不替换
        var btnNext = $('<a id="btn-next"></a>').text('下一步')
            .addClass('btn btn-info')
            .on('click', function(){ $('#smartwizard').smartWizard("next");});
        var btnPrev = $('<a id="btn-prev"></a>').text('上一步')
            .addClass('btn btn-success disabled')
            .on('click', function(){ $('#smartwizard').smartWizard("prev"); });
        // 初始化表单向导组件
        $('#smartwizard').smartWizard({
            theme: 'arrows', // default, arrows, dots, progress
            autoAdjustHeight : false, // 自动调整高度, 默认true
            enableURLhash:false, //开启URL hash,开启后点击浏览器前进后退按钮会执行下一步和上一步操作
            transition: {
                animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
            },
            toolbarSettings: {
                showNextButton: false,// 因为上面自定义了下一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
                showPreviousButton: false,// 因为上面自定义了上一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
                toolbarExtraButtons: [btnPrev,btnNext,btnFinish]// 扩展的按钮集合
            }
        });

        initSelect();


    });

    function submit(){
        debugger;
        if ($.validate.form("form-form-add")) {
            var data = {};
            $('.form').each(function (index, form){
                // 这里可以使用$.common.formToJSON(formId);  需要在form上加id
                $.each($(form).serializeArray(), function(i, field) {
                    if(data[field.name]) {
                        data[field.name] += ("," + field.value);
                    } else {
                        data[field.name] = field.value;
                    }
                });
            });
            $("#bpmnIframe")[0].contentWindow.formData = data;
            $("#bpmnIframe")[0].contentWindow.document.getElementById("saveBpmnModel").click()
        }

    }
    // 显示步骤时将触发事件
    $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
        // 下面按钮是工具栏的
        $("#btn-prev").removeClass('disabled');
        $("#btn-next").removeClass('disabled');
        $("#btn-finish").removeClass('disabled');
        if(stepPosition === 'first') {
            $("#btn-prev").addClass('disabled');
            $("#btn-finish").addClass('disabled');
        } else if(stepPosition === 'last') {
            $("#btn-next").addClass('disabled');
        } else {
            $("#btn-prev").removeClass('disabled');
            $("#btn-next").removeClass('disabled');
            $("#btn-finish").addClass('disabled');
        }
    });

    // 该事件在离开某个步骤之前触发
    $("#smartwizard").on("leaveStep", function(e, anchorObject, currentStepNumber, nextStepNumber, stepDirection) {

        //如果是前进
        if(stepDirection == 'forward'){
            var form = $("#step-" + (currentStepNumber + 1)).find('.form');
            if(form.length > 0){
                var flag = form.validate().form();
                if(flag){
                    //如果是第二步,那么将流程key和流程名传递给bpmn
                    debugger;
                    if(currentStepNumber==1){
                        var processKey = $("#processKey").val();
                        var name = $("#name").val();
                        $("#bpmnIframe")[0].contentWindow.processKey = processKey;
                        $("#bpmnIframe")[0].contentWindow.name = name;
                        $("#bpmnIframe")[0].contentWindow.setKeyAndName();
                    }
                    return true;
                }else{
                    return false;
                }
            }



        }
        return true;
    });

    $("#theme-selector").on("change", function() {
        // Change theme
        var options = {
            theme : $(this).val()
        };
        $('#smartwizard').smartWizard("setOptions", options);
        return true;
    });

    function initSelect(){
        $.ajax({
            url: "/custForm/form/getFormByStatus?status=0",
            type: "GET",
            success: function(res){
                debugger;
                var data = [{"id": "", "text": "--请选择--"}];
                for(var i=0 ; i<res.length ; i++){
                    data.push({"id": res[i].id, "text": res[i].formName});
                }
                $("#form_select").select2({
                    data: data
                });
            }
        })
    }

    function showForm(){
        debugger;
        var id = $("#form_select").select2("val");
        $.ajax({
            url: "/custForm/form/getFormById?id="+id,
            type: "GET",
            success: function(res){
                $("#form_show").html(res.content);
            }
        })
    }

    function openDesignTab(){
        $.modal.openTab("表单编辑页", "/custForm/form/designFromDefinition?windowName="+window.name);
    }

    function resetSelect2(){
        $("#form_show").text("");
        $("#form_select").select2('destroy').empty();
        initSelect();
    }

    /* 流程模板-新增-选择部门树 */
    function selectDeptTree() {
        var treeId = $("#treeId").val();
        var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
        var url = ctx + "system/dept/selectDeptTree/" + deptId;
        var options = {
            title: '选择部门',
            width: "380",
            url: url,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero){
        var tree = layero.find("iframe")[0].contentWindow.$._tree;
        var body = layer.getChildFrame('body', index);
        $("#treeId").val(body.find('#treeId').val());
        $("#treeName").val(body.find('#treeName').val());
        layer.close(index);
    }
</script>
</body>
</html>